<template>
    <div class="box-list">
        <div class="box-dv" :style="{height: screenHeight - 104 +'px'}">
            <div class="box-list__items" v-for="(item, index) in getGetCaptcha" :key="index" @click="goDetail(item._id)">
                <div class="bt-title">
                    <p>{{item.title}}</p>
                </div>
                <div class="highlight hight-cont" v-html="item.content" v-highlight></div>
                <div class="box-list__pk">
                    <p class="box-list__date">Time: {{item.date}}</p>
                    <p class="box-list__hot">Hot：{{item.hot}}</p>
                </div>
            </div>
            <div class="page-dv" v-if="onShow">
                <ul>
                    <li>&lt;</li>
                    <li>1</li>
                    <li>&gt;</li>
                </ul>
            </div>
            <div class="hei-100"></div>        
        </div>
    </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
export default {
    name: 'rg-contain',

    data(){
        return {
            onShow: false,
            screenHeight: document.documentElement.clientHeight
        }
    },

    computed: {
        ...mapGetters(['getGetCaptcha'])
    },

    created(){
        this.$store.dispatch({type: 'getCaptcha'});
    },

    methods: {
        goDetail(id){
            // 跳转商详
            this.$router.push({path: `/detail`, query: {id}})
        }
    },


}
</script>

<style lang="less">
    .box-list {
        margin: 0 20px;
        flex: 1;
        text-align: left;
        overflow: hidden;
        &__items {
            width: 98%;
            border: 1px solid #ddd;
            margin-bottom: 30px;
            padding: 15px 0;
            cursor: pointer;
            color: #999;
            &:hover {
                background: #fffee6;
                box-shadow: 0 15px 30px 0 rgba(0,0,0,.1);
                -webkit-transform: translate3d(0,-5px 0);
                transform: translate3d(0,-5px 0);
                .bt-title p {
                    color: #f90;
                    background: #fffee6;
                }
            }
        }
        &__pk {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 20px;
            font-family: "vani";
        }
        &__date {
            font-size: 16px;
        }
    }
    .page-dv {
        width: 100%;
        ul {
            display: flex;
            justify-content: flex-end;
        }
        li {
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            margin-left: 8px;
            cursor: pointer;
            &:hover {
                background: #f90;
                color: #fff;                
            }
        }
    }
    .box-dv {
        width: 102%;
        overflow: hidden;
        overflow-y: scroll;
    }
    .bt-title {
        position: relative;
        height: 50px;
        margin: 0 20px;
        color: #000;
        p {
            position: absolute;
            z-index: 9;
            left: 30px;
            top: 20px;
            background: #fff;
            padding: 0 10px;
            font-size: 16px;
        }
        &::before {
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            height: 1px;
            background: #ddd;
            display: block;
            content: '';
        }
    }
    .hight-cont {
        width: 96%;
        max-height: 200px;
        min-height: 160px;
        margin: 15px 20px; 
        overflow: hidden;
    }
</style>

